<template>
	<view class="content">
		<scroll-view scroll-y class="page">
			<nav-header bgColor="bg-custom-color">
				<block slot="content">{{$t('index.title')}}</block>
			</nav-header>

			<swiper class="screen-swiper square-dot img-swiper" :indicator-dots="true" :circular="true" :autoplay="true"
			 interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</swiper-item>
			</swiper>

			<view class="gg-div bg-custom-color boder_bottom">
				<view class="box gg">{{$t('index.Notice')}}</view>
				<view class="box gg-content" @tap="$common.toPage('../news/news')">{{newsList.title}}</view>
			</view>

			<view class="lc-nav">
				<view class="nav-div" @tap="$common.toPage('../order/order')">
					<image class="img-view" src="../../static/img/K.png" mode="aspectFit"></image>
					<view class="nav-title text-color">{{$t('index.chongzhi')}}</view>
				</view>
				<view class="nav-div" @tap="$common.toPage('../order/record')">
					<image class="img-view" src="../../static/img/yunkuangji.png" mode="aspectFit"></image>
					<view class="nav-title text-color">{{$t('index.goumaikuangji')}}</view>
				</view>
				<view class="nav-div" @tap="$common.showToast('暂未开放')">
					<image class="img-view" src="../../static/img/order.png" mode="aspectFit"></image>
					<view class="nav-title text-color">{{$t('index.myOrder')}}</view>
				</view>
				<view class="nav-div" @tap="$common.showToast('暂未开放')">
					<image class="img-view" src="../../static/img/qianbao.png" mode="aspectFit"></image>
					<view class="nav-title text-color">{{$t('index.myZichan')}}</view>
				</view>
			</view>

			<view class="lc4">
				<view class="lc4-one">
					<view class="lc4-one-box left">
						<view class='lc4-title lc4-title1 '>
							<image class="img-view" src="../../static/img/bitebi_icon.png" mode="aspectFit" style="width: 25px;height: 25px;"></image>
							<view style="margin-left: 10px;">{{$t('index.executeContractCurrency')}}</view>
						</view>
						<view class='lc4-title lc4-title2' style="margin-top: 8px;"> <text class="lc4-title2-text">kex</text></view>
						<view><text class='lc4-title lc4-title3 '>1.5785</text><text class='lc4-title lc4-title4'>+0.87%</text></view>
					</view>
					<view class="lc4-one-box ">
						<view class='lc4-title lc4-title1 '>
							<image class="img-view" src="../../static/img/bitebi_icon.png" mode="aspectFit" style="width: 25px;height: 25px;"></image>
							<view style="margin-left: 10px;">{{$t('index.gusd')}}</view>
						</view>
						<view class='lc4-title lc4-title2' style="margin-top: 8px;"><text class="lc4-title2-text">kex</text></view>
						<view><text class='lc4-title lc4-title3 '>1.3555</text><text class='lc4-title lc4-title4'>+0.87%</text></view>
					</view>

				</view>
			</view>

			<view>
				<view class="lc-title">
					<text class="h1-title">算力额度</text>
					<text class="text-color" style="float: right;">18000/20000</text>
				</view>
				<view class="cu-progress round">
					<view class="bg-red" style="background-color: #7CECF8;" :style="[{ width:loading?'61.8%':''}]"></view>
				</view>
			</view>

			<view style="height: 400px;">
				<view class="lc-title">
					<text class="h1-title">{{$t('index.orderList')}}</text>
				</view>
				<view class="uni-swiper-msg bg-custom-color" style="padding: 0 15px;height: -webkit-fill-available;">
					<view class="hy-title-box" v-for="(cur,index) in orderInfoList" :key="index">
						<view class="hy-title hy-content left" style="height: 50px;">
							<view>
								<image class="img-view" src="../../static/img/zhanghao.png" mode="aspectFit" style="width: 15px;height: 15px;margin-right: 5px;"></image>
								<text style="font-size: 16px;">{{showMobile(cur.addUserName)}}</text>
							</view>
							<view><text style="font-size: 14px;margin-left: 20px;">{{showDate(cur.addDate)}}</text></view>
						</view>
						<view class="hy-title hy-content right" style=""><text class="suanli-text">算力</text><text class="suanli-value">{{cur.orderMoney}}</text></view>
					</view>
				</view>
			</view>
			<view style="height: 45px;"></view>

			<!-- <view class="uni-swiper-msg bg-custom-color">
				<view class="hy-title-box hy-title-box1">
					<text class="hy-title text-color">{{$t('account')}}</text>
					<text class="hy-title text-color">{{$t('contract')}}</text>
					<text class="hy-title text-color">{{$t('time')}}</text>
				</view>
				<swiper class="swiper text-swiper" vertical="true" autoplay="false" display-multiple-items="5" duration="500"
				 interval="4000">
					<swiper-item v-if="null != orderInfoList && orderInfoList.length > 0" v-for="(cur,index) in orderInfoList" :key="index"
					 class="hy-title-box">
						<view class="hy-title hy-content">{{showMobile(cur.addUserName)}}</view>
						<view class="hy-title hy-content">{{cur.orderMoney}}</view>
						<view class="hy-title hy-content">{{showDate(cur.addDate)}}</view>
					</swiper-item>
				</swiper>
			</view> -->
			<!-- </view> -->
			<nav-bottom showIndex='1'></nav-bottom>
		</scroll-view>
	</view>
</template>

<script>
	let t
	export default {
		data() {
			return {
				loading: false,
				title: 'Hello',
				orderInfoList: [],
				navList: [
					// {
					// 	title: '预约合约',
					// 	imgPath: '../../static/yuyueheyue.png',
					// 	pagePath: '../order/order',
					// },
					{
						title: '执行合约',
						imgPath: '../../static/zhixingheyue.png',
						pagePath: '../order/order',
					},
					{
						title: '合约记录',
						imgPath: '../../static/heyuejilu.png',
						pagePath: '../index/index',
					},
					{
						title: '理财',
						imgPath: '../../static/licai.png',
						pagePath: '../index/index',
					}
				],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'http://39.97.163.60:8081/ghmi/1.png'
				}, {
					id: 1,
					type: 'image',
					url: 'http://39.97.163.60:8081/ghmi/2.png',
				}, {
					id: 2,
					type: 'image',
					url: 'http://39.97.163.60:8081/ghmi/3.png'
				}, {
					id: 3,
					type: 'image',
					url: 'http://39.97.163.60:8081/ghmi/4.png'
				}, {
					id: 4,
					type: 'image',
					url: 'http://39.97.163.60:8081/ghmi/5.png'
				}],
				newsList: [],
			}
		},
		onLoad() {
			t = this
			// console.info(JSON.parse(t.$common.localRead("local")))
			t.userInfo = $common.getUser()
			console.info(t.userInfo);
			this.$i18n.locale = t.$common.localRead("local")
			this.TowerSwiper('swiperList');
			t.getNewsList()
			t.getData()

			setTimeout(function() {
				t.loading = true
			}, 500)

		},
		methods: {
			getData() {
				t.$fetch.request('orderInfo/appIndex').then((res) => {
					if (res.code == 200) {
						t.orderInfoList = res.data.entityList
					} else {
						$common.showToast(res.msg);
					}
				}).catch((e) => {})
			},
			showMobile(str) {
				if (!str || str == '') {
					return ''
				}
				return str.substr(0, 3) + '****' + str.substr(8, 11)
			},
			showDate(str) {
				if (!str || str == '') {
					return ''
				}
				str = $common.dateFormat(str);

				return str.substr(5, str.length - 1)
			},

			getNewsList() {
				let data = {
					'language': 'zh_cn',
					'pageNum': '0',
					'pageSize': '10'
				}
				t.$fetch.request('api/queryBulletin', data, 'POST').then((res) => {
					t.newsList = res.data[0]
				}).catch((e) => {})
			},

			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
		}
	}
</script>

<style>
	.cu-custom .cu-bar .content {
		width: 100% !important;
	}

	.custom-title {
		width: 100% !important;
		text-align: left !important;
		margin-left: 10px !important;
	}

	.cu-bar.tabbar .action {
		padding: 10px;
	}

	uni-image {
		display: -webkit-inline-box;
	}

	.img-swiper {
		/* min-height: 20%;
		max-height: 20%; */
	}

	.gg-div {
		height: 40px;
		line-height: 40px;
		/* border-bottom: 1px solid #e6bcbb; */
		background: #ECF4F6;
		color: #4CB0BE;

	}

	.box {
		display: inline-grid;
	}

	.gg {
		width: 18%;
		text-align: center;
		overflow: hidden;
	}

	.gg-content {
		width: 82%;
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		padding-left: 10px;
	}

	.nav {
		/* margin-top: 10px; */
		/* height: 80px; */
		padding: 10px;
	}

	.nav-view {
		flex: 1;
		width: 25%;
	}

	.img-view {
		text-align: center;
		height: 80px;
		width: 80px;
	}

	.nav-title {
		/* padding: 5px; */
		text-align: center;
		position: relative;
		top: -13px;
	}

	.nav-box {
		padding: 10px 0;
	}

	.lc4 {
		/* background-color: #061C2A; */
		padding: 10px 15px;
		height: 15%;
	}

	.lc4-one {
		/* background-color: #061c2a; */
		display: flex;
	}

	.lc4-one-box {
		border-radius: 6px;
		flex: 1;
		/* background-color: #172434; */

		background-image: linear-gradient(-90deg, #bb7fb3 0%, #4c3eac 100%);
		/* background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
		color: white;
	}

	.lc4-one .left {
		margin-right: 10px;
	}

	.lc4-title {
		margin: 0 40upx;
		height: 28px;
		line-height: 28px;
	}

	.lc4-title4 {
		color: #24BD9E;
		font-size: 10px;
	}

	.lc4-title2-text {
		font-size: 16px;
		font-weight: bold;
	}

	.hy {
		min-height: 40px;
	}

	.hy-title-box {
		/* display: flex; */

	}

	.hy-title-box1 {
		padding: 5px;
	}

	.hy-title {
		/* flex: 1; */
		text-align: center;
	}

	.hy-content {
		color: #808080;
	}

	.boder_bottom {
		/* border-bottom: 1px solid #40576f; */
	}

	.text-swiper {
		/* max-height: 20%; */
		height: 120px;
		padding: 10px;
	}

	.cu-custom .cu-bar .content {
		width: 100%;
	}

	.lc-nav {
		display: flex;
	}

	.nav-div {
		flex: 1;
		text-align: center;
	}

	.lc4-title1 {
		display: -webkit-inline-box;
		padding: 10px 0px;
	}

	.lc-title {
		height: 30px;
		line-height: 30px;
		margin: 10px 15px;
	}

	.hy-title-box .left {
		height: 40px;
		line-height: 20px;
		margin-bottom: 5px;
		text-align: left;
		width: 70%;
		float: left;
	}

	.hy-title-box .right {
		width: 30%;
		/* margin-left: 100px; */
		text-align: left;
		float: left;
	}

	.suanli-text {
		background-color: #C3BAD9;
		color: white;
		padding: 2px;
		font-size: 12px;
		margin-right: 5px;
	}

	.suanli-value {
		color: #333333;
		font-weight: bold;
	}

	.cu-progress {
		margin: 10px 15px;
	}

	.page {
		height: 100vh;
	}
</style>
